<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_03</title>
    <style>
        #div_1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        #div_2 {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
<!--    <script src="../../js/jquery.min.js"></script>-->

    <script src="http://libs.baidu.com/jquery/1.3.1/jquery.min.js"></script>
    <script>
        // 记录点击的次数
        let number = 0;
        $(function () {
            // TODO 文档加载成功执行方法
            $("#div_1").click(function () {
                number++;
                if (number % 3 == 0) {
                    $("#div_1").css("background-color", "red");
                } else if (number % 3 == 1) {
                    $("#div_1").css("background-color", "green");
                } else {
                    $("#div_1").css("background-color", "blue");
                }
            });
            $( "#div_2" ).toggle(function() {
                $("#div_2").css("background-color", "red");
            }, function() {
                $("#div_2").css("background-color", "green");
            },function () {
                $("#div_2").css("background-color", "blue");
            });
        });


    </script>
</head>
<body>


<div id="div_1">
    div_1 id=div_1
</div>
<hr>
<div id="div_2">
    div_2 id=div_2
</div>
<hr>



</body>
</html>